<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 事件有三个部分组成 ：事件源  事件类型 事件处理程序 -->
    <!-- 事件源：事件被触发的对象 -->

    <div>
        <button id="btn">按钮</button>
    </div>
    <div id="div1"> 123</div>
    <div>1111</div>
    <button id="btn1">显示当前时间</button>
    <div id="div2">某个时间</div>
    <p>123456</p>
    <script>
        var btn = document.getElementById('btn');
        //事件类型  ： 如何触发  什么事件 如鼠标点击（onclick）
        //事件处理程序  通过一个函数赋值的方式完成
        btn.onclick = function(){
            alert('你好');
        }

        //执行事件的步骤
        // 1.获取事件源 document.getElementById('');
        // 2.注册事件（绑定事件） btn.onclick
        // 3.添加事件处理程序  btn.onclick = function(){}  (采取函数赋值形式)
        var div = document.getElementById('btn1');
        div.onclick = function(){
            alert('我被选中了');
        }

        // 把元素里面的内容修改 element.innerText
        //当我们点击了按钮  div里面的文字会发生变化
        var btn2 = document.getElementById('btn1');
        var div2 = document.getElementById('div2')
        btn2.onclick = function(){
            div2.innerText = getDate();
        }
        function getDate(){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() +1;
            var dates = date.getDate();
            var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            var day = date.getDay();
            return '今天是：'+ year+ '年' +month +'月'+dates+'日'+arr[day] ;

        }

        //元素可以不用添加事件
        var p = document.querySelector('p');
        p.innerHTML = getDate();
    </script>
</body>
</html>